<template>
  <div>
    <n-button @click="showAddModel = true">新增</n-button>
    <n-table :bordered="false" :single-line="false">
      <thead>
        <tr>
          <th>编号</th>
          <th>标题</th>
          <th>内容</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(article, index) in articleList" :key="index">
          <td>{{ article.id }}</td>
          <td>{{ article.title }}</td>
          <td>{{ article.content }}</td>
          <td>{{ article.create_time }}</td>
          <td>
            <n-space>
              <n-button>查看</n-button>
              <n-button>修改</n-button>
              <n-button>删除</n-button>
            </n-space>

          </td>
        </tr>
      </tbody>
    </n-table>
    <n-modal v-model:show="showAddModel" preset="dialog" title="Dialog" style="width: 800px; height: 800px;">
      <template #header>
        <div>新增文章</div>
      </template>
      <div>
        <n-input v-model:value="addArticle.name" type="text" placeholder="请输入文章标题" />
        <div style="height: 30px;"></div>
        <QuillEditor v-model:content="addArticle.content" contentType="html" placeholder="请输入文章内容" theme="snow" style="height: 500px;" />
      </div>
      <template #action>
        <div>
          <n-button @click="add">提交</n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>

<script lang="ts" setup>
import { ADMIN, JWT_HEADER } from '@/common/constant'
import type { AxiosInstance, AxiosRequestConfig } from 'axios'
import { ref, reactive, inject, onMounted } from 'vue'
import { useRouter, useRoute, type Router, type RouteLocationNormalizedLoaded } from 'vue-router'
import { QuillEditor } from '@vueup/vue-quill'  //引入富文本编辑器
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { useJwtStore } from '@/stores/jwt'
import type { MessageApiInjection } from 'naive-ui/es/message/src/MessageProvider'
import type { PageParams, ArticleAddParams } from '@/types/params'


const showAddModel = ref(false)
const addArticle = reactive({
  name: '',
  content: ''
})
const articleList = ref<any[]>([])

const axios: AxiosInstance | undefined = inject<AxiosInstance>('axios')
const message: MessageApiInjection | undefined = inject<MessageApiInjection>('message')


const jwtStore = useJwtStore()



// 页面加载时将会调用onneMounted钩子函数 这是vue的生命周期钩子函数
onMounted(() => {
  getArticleList()
})

async function getArticleList() {
  if (!axios) {
    console.log('axios实例不存在')
    return
  }

  console.log(JWT_HEADER)
  let headers = { [JWT_HEADER]: jwtStore.getJwt }  //[JWT_HEADER] 可把变量值作为key {}是一个object
  let params: PageParams = { pageNo: 1, pageSize: 10 }
  let config: AxiosRequestConfig = {
    headers: headers,
    params: params  //Query参数
  }

  console.log(config)

  const res = await axios.get('/article/pageQuery', config)

  console.log(res)
  let data = res.data

  if (data.code === 200) {
    console.log(data)
    articleList.value = data.data
  } else {
    console.log(data)
  }

}


async function add() {
  if (!axios) {
    console.log('axios实例不存在')
    return
  }



  console.log(JWT_HEADER)
  let headers = { [JWT_HEADER]: jwtStore.getJwt }  //[JWT_HEADER] 可把变量值作为key {}是一个object


  let params: ArticleAddParams = { title: addArticle.name, content: addArticle.content }
  let config: AxiosRequestConfig = {
    headers: headers,
    data: params  //data参数是放在request body中
  }

  console.log(params)

  const res = await axios.put('/article/create', config)

  console.log(res)
  let data = res.data

  if (data.code === 200) { //弹出提示
    message?.success('新增成功')
  } else {
    message?.error('新增失败')
  }

  showAddModel.value = false //隐藏新增窗口

}


</script>


<style scoped lang="scss">

</style>